<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单修饰符</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				type=number 表示只能输入数值类型	
				v-model.number="num" 表示js转化为number类型 
			-->
			请输入数值:<input type="text" v-model.number="num" /><br>
			<button @click="addNum">计算</button>
			<hr>
			<!-- 去空格操作 -->
			用户名:<input type="text" v-model.trim="username" />
			<button @click="nameSize">长度</button>
			{{length}}
			<br>
			<!-- 懒加载方式 当用户输入完成之后,失去焦点时才会触发 -->
			<input type="text" v-model.lazy="msg" />{{msg}}



		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num: '',
					username: '',
					length: 0,
					msg: ''
				},
				methods: {
					addNum() {
						// this.num = parseInt(this.num) + 20
						this.num += 20
					},
					nameSize() {
						this.length = this.username.length
					}

				}
			})
		</script>
	</body>
</html>
